<!--云坐席弹窗-->
<template>
    <Dialog :openVis="visible" width="30%" :title="title" @close="closeDialog" :maskClosable="false">
        <template #container>
            <div class="police-con" :class="[themeType]">
                <div class="sub-text"> 有一个员工刚刚拨打 应急电话,请马上处理!</div>
                <div class="con-item">
                    <span>姓名：</span>
                    <span>{{ userInfo?.realName }}</span>
                </div>
                <div class="con-item">
                    <span>年龄：</span>
                    <span>{{ userInfo?.age || '未知' }}</span>
                </div>
                <div class="con-item">
                    <span>单位：</span>
                    <span>{{ userInfo?.departName || '未知' }}</span>
                </div>
                <div class="con-item">
                    <span>部门：</span>
                    <span>{{ userInfo?.orgName || '未知' }}</span>
                </div>
                <div class="con-item">
                    <span>电话：</span>
                    <span>{{ userInfo?.phone || '未知' }}</span>
                </div>
            </div>
            <div class="btn-box">
                <a-button type="primary" @click="confirmHelp">确认</a-button>
            </div>
        </template>
    </Dialog>
</template>
<script setup lang="ts">
    import Dialog from '/@/components/dialog/Dialog.vue';
    import { useDialog } from '/@/views/components/dialogHooks.ts';
    import { watch, ref, Ref } from 'vue';
    import { useTheme } from '/@/hooks/theme/useTheme.ts';

    const props = defineProps({
        record: Object,
    });
    const emit = defineEmits(['confirmHelp']);
    const { themeType } = useTheme();

    interface UserInfo {
        realName?: string;
        age?: string;
        departName?: string;
        orgName?: string;
        phone?: string;
    }

    const userInfo: Ref<UserInfo> = ref({});
    watch(
        () => props.record,
        (nVal: UserInfo) => {
            userInfo.value = nVal;
        }
    );
    const { visible, title, closeDialog, openDialog } = useDialog({ title: '应急求助' });

    defineExpose({
        openDialog,
    });

    //确认帮助
    function confirmHelp() {
        closeDialog();
        emit('confirmHelp', userInfo.value);
    }
</script>
<style scoped lang="less">
    .police-con {
        padding: 2% 0 2% 5%;

        .sub-text {
            font-weight: bold;
            margin-left: 8px;
            font-size: 16px;
        }

        .con-item {
            padding: 1.3% 0;
            display: flex;

            span:nth-child(1) {
                font-weight: bold;
                text-align: right;
                display: inline-flex;
                justify-content: flex-end;
                width: 80px;
            }

            span:nth-child(2) {
                flex: 1;
                padding-left: 2%;
                padding-right: 2%;
            }
        }
    }

    .btn-box {
        text-align: center;
        margin-top: 2%;
    }
</style>
